<template>
  
  <div id="app">
        <!-- 主体 -->
        <el-container style="height: 500px; border: 1px solid #eee ;height: 700px" >
            <!-- 侧栏 -->
            <el-aside width="200px" style="background-color: #E5DDD7">
             <Aside></Aside>
            </el-aside>
            <!-- 中间 -->
            <el-container>
                <el-header style="text-align: right; font-size: 12px;background-color: #492D22;">
                    <Header></Header>
                </el-header>

                <el-main style="background-color: #D8C7B5;">
                    <router-view></router-view>
                </el-main>

            </el-container>
            
        </el-container>
        <el-footer style="background-color: #FAEAD3;height: 50px;">
            <div style="float: right;">
    </div>
        </el-footer>
    </div>

</template>


<!-- css -->
<style>
    /* el-header样式 */
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    /* el-aside样式 */
    .el-aside {
        color: #333;
    }

    /* a 样式 */
    a {
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
    }
</style>


<script>
import Aside from "./Aside"
import Header from "./Header"


export default {
  name: 'MyIndex',
  components:{Aside,Header},
  
}
</script>

